import React from 'react';
import {
  List,
  Card,
  Drawer,
  Form,
  Button,
  Col,
  Row,
  Input,
  Select,
  DatePicker,
  InputNumber,
  Badge,
} from 'antd';
import PropTypes from 'prop-types';

const { TextArea } = Input;
const { Option } = Select;

class EditFormContent extends React.Component {
  state = { visible: false };

  constructor(props) {
    super(props);
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    let parameters = {};
    try {
      parameters = JSON.parse(this.props.parameters);
    } catch (e) {

    }
    const { FeeRate, ApiType, AppId, PID, Account, RSAType, PublicKey, PrivateKey, RefundFee } = parameters;
    return (
      <Form layout="vertical" hideRequiredMark>
        <Row>
          <Form.Item label="渠道费率">
            {getFieldDecorator('FeeRate', {
              initialValue: FeeRate,
              rules: [{ required: true, message: '请填写渠道费率' }],

            })(<InputNumber placeholder="渠道费率" style={{ width: '100%' }}
                            min={0}
                            max={100}
                            formatter={value => `${value}%`}
                            parser={value => value.replace('%', '')}/>) }
            <div style={{
              color: '#ccc',
              padding: '4vm',
            }}>请在此处填写你的渠道签约费率，以便我们在报表中帮你计算结算金额。若不清楚签约费率，请联系支付渠道确认。（目前暂不支持阶梯费率计算）
            </div>
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label="支付宝API版本">
            {getFieldDecorator('ApiType', {
              initialValue: ApiType,
              rules: [{ required: true, message: '请选择支付宝API版本' }],
            })(
              <Select placeholder="请选择支付宝API版本">
                <Option value="OpenAPI">OpenAPI</Option>
                <Option value="MAPI">MAPI</Option>
              </Select>,
            )}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label="支付宝商户 App ID">
            {getFieldDecorator('AppId', {
              initialValue: AppId,
              rules: [{ required: true, message: '请填写支付宝商户 App ID' }],
            })(<Input placeholder="支付宝商户 App ID"/>)}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label="合作伙伴身份（PID）">
            {getFieldDecorator('PID', {
              initialValue: PID,
              rules: [{ required: true, message: '请填写合作伙伴身份（PID）' }],
            })(<Input placeholder="合作伙伴身份（PID）"/>)}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label="支付宝账户">
            {getFieldDecorator('Account', {
              initialValue: Account,
              rules: [{ required: true, message: '请填写支付宝账户' }],
            })(<Input placeholder="支付宝账户"/>)}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label="RSA 密钥类型">
            {getFieldDecorator('RSAType', {
              initialValue: RSAType,
              rules: [{ required: true, message: '请选择RSA 密钥类型' }],
            })(
              <Select placeholder="请选择RSA 密钥类型">
                <Option value="SHA1">SHA1</Option>
                <Option value="SHA256">SHA256</Option>
              </Select>,
            )}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label={'支付宝公钥'}>
            {getFieldDecorator('PublicKey', {
              initialValue: PublicKey,
              rules: [
                {
                  required: true,
                  message: '请填写支付宝公钥',
                },
              ],
            })(
              <TextArea
                style={{ minHeight: 32 }}
                placeholder={'支付宝公钥'}
                rows={4}
              />,
            )}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label={'应用私钥'}>
            {getFieldDecorator('PrivateKey', {
              initialValue: PrivateKey,
              rules: [
                {
                  required: true,
                  message: '请填写应用私钥',
                },
              ],
            })(
              <TextArea
                style={{ minHeight: 32 }}
                placeholder={'应用私钥'}
                rows={4}
              />,
            )}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label="退款时是否退还支付手续费">
            {getFieldDecorator('RefundFee', {
              initialValue: RefundFee,
              rules: [{ required: true, message: '请选择退款时是否退还支付手续费' }],
            })(
              <Select placeholder="请选择退款时是否退还支付手续费">
                <Option value="1">是</Option>
                <Option value="0">否</Option>
              </Select>,
            )}
          </Form.Item>
        </Row>
      </Form>
    );
  }
}

const EditForm = Form.create({
})(EditFormContent);

EditForm.propTypes = {
  parameters: PropTypes.string.isRequired,

};
export default EditForm;
